<template>
  <master title="答题信息">
    <div style="padding: 30px">
      <el-row style="width: 90%;text-align: center;margin-top: 30px">
        <h1>{{practice.name}}</h1>
       <!-- <p style="margin-top: 20px">{{remark}}</p>-->

      </el-row>
      <el-row style="width: 90%;padding: 30px">
        <el-col :span="16" >
        <div style="margin-top: 20px;width: 100%;line-height: 100px;margin-top: 20px">
          <div class="my_topic">

            <div class="choice_topic" v-for="(site,index) in rows" :key="index">

              <div class="choice_topic_li">{{index+1}}、{{site.question}}<span style="color: green" v-if="site.res==1">(你的答案：{{site.stuAnswer}})({{site.grade}}分)</span>
                <span style="color: red" v-if="site.res==0 ">(你的答案：{{site.stuAnswer}})({{site.grade}}分)</span>
              <span style="color: orange" v-if="site.res==2 ">(你的答案：{{site.stuAnswer}})({{site.grade}}分)</span></div>
              <div class="choice_topic_li" v-for="site1 in site.optionArr" >

                <!-- <el-checkbox v-model="checked">{{site1}} </el-checkbox>-->
                <el-radio   label="site1">{{site1}}</el-radio>

              </div>

              <div class="choice_topic_li" style="background-color: #bfcbd9">
                <span>参考答案：{{site.answer}}</span><br/>
                <span>解析：{{site.content}}</span><br/>
                <span v-if="site.type>3 ">给分理由：{{site.pgContent}}</span>


              </div>
            </div>
          </div>

        </div>
        </el-col>
        <el-col :span="8" >
          <h1>姓名：{{username}}   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 得分：<span style="color: red;font-size: 48px">{{allGrade}}</span></h1>
          <div class="choice_topic_li" style="margin-top: 30px;">
            <p style="line-height: 30px">练习分析：{{analysis}}</p>
          </div>
        </el-col>
      </el-row>
    </div>

  </master>
</template>
<script type="text/javascript">
(function (G) {
G.vue({
  "usingComponents": {///引入组件
    "master": "/components/Master/Master"///母版组件
  },
  "enablePullDownRefresh": true
},{
  data:{
    userId:'',
    checked:false,
    allGrade:'',
    analysis:'',
    rows:[],
    id:'',
    username:'',
    practice:{},
    allGrade:''
  },
  methods:{
    getList() {

      G.get('{JAVAURL}/sp-practice/answerInfo', {id:this.id}).then((res) => {
        this.rows = res.data.list;
        this.practice = res.data.practice;
        this.allGrade = res.data.allGrade;
        this.analysis = res.data.content
      });
    },
  },

  mounted(query) {

    this.id = query.id;
    this.username = query.name;
    this.getList();
  }
});
})(Y)
</script>
<style >
  .my_topic .choice_topic{

    width: 95%;
    padding: 10px;
    margin: 0px;

  }
  .choice_topic_li{
    width: 95%;
    margin: 0px;
    padding: 5px;
    line-height: 30px;

  }

</style>
